<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工列表</title>
    <style>
        .query-form { width: 80%; margin: 20px auto; padding: 15px; border: 1px solid #ddd; }
        .form-group { display: inline-block; margin-right: 15px; }
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .pagination { text-align: center; margin: 20px; }
        .pagination a { margin: 0 5px; padding: 5px 10px; border: 1px solid #ddd; text-decoration: none; }
        .pagination a.active { background-color: #4CAF50; color: white; }
    </style>
</head>
<body>
<div class="header">
    <h1>员工信息管理</h1>
    <a href="${pageContext.request.contextPath}/logout">退出登录</a>
</div>

<!-- 1. 多条件查询表单 -->
<div class="query-form">
    <form action="${pageContext.request.contextPath}/employee/list" method="get">
        <div class="form-group">
            <label>姓名:</label>
            <input type="text" name="name" value="${query.name}" placeholder="模糊查询">
        </div>
        <div class="form-group">
            <label>部门:</label>
            <input type="text" name="department" value="${query.department}">
        </div>
        <div class="form-group">
            <label>职位:</label>
            <input type="text" name="position" value="${query.position}">
        </div>
        <div class="form-group">
            <label>薪资范围:</label>
            <input type="number" step="0.01" name="minSalary" value="${query.minSalary}" placeholder="最低">
            <span>-</span>
            <input type="number" step="0.01" name="maxSalary" value="${query.maxSalary}" placeholder="最高">
        </div>
        <button type="submit">查询</button>
        <button type="button" onclick="window.location.href='${pageContext.request.contextPath}/employee/list'">重置</button>
    </form>
</div>

<!-- 2. 消息提示 -->
<c:if test="${not empty message}">
    <div style="color: green; text-align: center;">${message}</div>
</c:if>
<c:if test="${not empty error}">
    <div style="color: red; text-align: center;">${error}</div>
</c:if>

<!-- 3. 员工列表 -->
<table>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>薪资</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>入职日期</th>
        <th>操作</th>
    </tr>
    <c:forEach var="emp" items="${pageResult.list}">
        <tr>
            <td>${emp.id}</td>
            <td>${emp.name}</td>
            <td>${emp.department}</td>
            <td>${emp.position}</td>
            <td>${emp.salary}</td>
            <td>${emp.email}</td>
            <td>${emp.phone}</td>
            <td>${emp.hireDate}</td>
            <td>
                <a href="${pageContext.request.contextPath}/employee/edit?id=${emp.id}">编辑</a>
                <a href="${pageContext.request.contextPath}/employee/delete?id=${emp.id}" onclick="return confirm('确定删除?')">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>

<!-- 4. 分页控件 -->
<div class="pagination">
    <c:if test="${pageResult.pageNum > 1}">
        <a href="?pageNum=1&name=${query.name}&department=${query.department}&position=${query.position}&minSalary=${query.minSalary}&maxSalary=${query.maxSalary}">首页</a>
        <a href="?pageNum=${pageResult.pageNum - 1}&name=${query.name}&department=${query.department}&position=${query.position}&minSalary=${query.minSalary}&maxSalary=${query.maxSalary}">上一页</a>
    </c:if>

    <c:forEach begin="1" end="${pageResult.totalPage}" var="i">
        <a href="?pageNum=${i}&name=${query.name}&department=${query.department}&position=${query.position}&minSalary=${query.minSalary}&maxSalary=${query.maxSalary}"
           class="${i == pageResult.pageNum ? 'active' : ''}">${i}</a>
    </c:forEach>

    <c:if test="${pageResult.pageNum < pageResult.totalPage}">
        <a href="?pageNum=${pageResult.pageNum + 1}&name=${query.name}&department=${query.department}&position=${query.position}&minSalary=${query.minSalary}&maxSalary=${query.maxSalary}">下一页</a>
        <a href="?pageNum=${pageResult.totalPage}&name=${query.name}&department=${query.department}&position=${query.position}&minSalary=${query.minSalary}&maxSalary=${query.maxSalary}">末页</a>
    </c:if>

    <span>共${pageResult.totalCount}条，${pageResult.totalPage}页</span>
</div>

<div style="text-align: center; margin: 20px;">
    <a href="${pageContext.request.contextPath}/employee/add">添加新员工</a>
</div>
</body>
</html>